import React from 'react';
import { Form, Breadcrumb, Row, Col, Input, DatePicker, Select, Modal, Button, Pagination, Icon,  Table, Checkbox, message, Timeline } from 'antd';
import { Link } from 'react-router';
import $ from 'jquery';
import Config from '../../../common/config';
import './crmSendList.less';
import region from '../../../common/region';
import moment from 'moment';

const FormItem = Form.Item;
const Option = Select.Option;
const config = new Config();
const InputGroup = Input.Group;
const { RangePicker } = DatePicker;
const token = sessionStorage.getItem('token');

class CrmSendList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            keyword: sessionStorage.getItem('keyword') ? sessionStorage.getItem('keyword').split(',') : [], // 关键词
            userInfo: JSON.parse(sessionStorage.getItem('UserInfo')), // 用户信息
            page: 1, // 发货订单的当前页
            pageSize: 10, // 发货订单的每页显示的条数
            total: 0, // 发货订单的总数
            sizeOptions: ['10', '20', '30', '40'], // 发货订单的条数选择
            orderList: [], // 订单列表
            selectOrder: [], // 选中的订单
            dateType: undefined, // 时间类型
            startDate: null, // 开始时间
            endDate: null, // 结束时间
            warehouseStatus: undefined, // 仓库状态
            shipping: [], // 快递信息
            expectedKuaidi100Code: undefined, // 预计发货快递公司编码
            Kuaidi100Code: undefined, // 发货快递公司编码
            orderStatus: undefined, // 订单状态
            shipOrderNumberVisible: false, // 快递单号模态框显示
            productVisibile: false, // 商品的模态框
            orderProduct: {}, // 订单的商品详情
            outboundOrderVisible: false, // 出库单模态框
            outboundOrderPreviewVisible: false, // 出库单预览模态框
            outboundOrderData: [], // 出库单数据
            resetShipOrderNumberVisible: false, // 重新生成快递单号模态框
            expressListVisible: false, // 快递单模态框
            pickingOrderVisible: false, // 拣货单模态框
            logisticsInformation: [], // 物流信息
            logisticsInformationVisible: false, // 物流信息模态框
            parcelNumber: 0, // 包裹号数量
        }
    }

    componentDidMount() {
        const state = this.props.location.state;
        if (state) {
            const { page, pageSize, dateType, startDate, endDate, warehouseStatus, expectedKuaidi100Code, Kuaidi100Code, orderStatus, consigneeName, shipOrderNumber, consigneePhone, parcelNumber } = state;
            this.props.form.setFieldsValue({
                consigneeName,
                shipOrderNumber,
                consigneePhone,
                parcelNumber
            });
            this.setState({
                page,
                pageSize,
                dateType,
                startDate: startDate ? moment(startDate, 'YYYY-MM-DD') : undefined,
                endDate: endDate ? moment(endDate, 'YYYY-MM-DD') : undefined,
                warehouseStatus,
                expectedKuaidi100Code,
                Kuaidi100Code,
                orderStatus
            }, () => {
                this.getDeliveryList();
            });
        } else {
            this.getDeliveryList();
        }
        this.getShipping();
    }

    // 获取发货订单列表
    getDeliveryList() {
        const { userInfo, page, pageSize, dateType, startDate, endDate, warehouseStatus, expectedKuaidi100Code, Kuaidi100Code, orderStatus } = this.state;
        const { consigneeName, shipOrderNumber, consigneePhone, parcelNumber } = this.props.form.getFieldsValue();
        $.ajax({
            url: `${config.CrmOrder}/getDeliveryList`,
            type: 'get',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            data: {
                id: userInfo.id,
                page,
                pageSize,
                consigneeName,
                shipOrderNumber,
                consigneePhone,
                parcelNumber,
                dateType,
                startDate: startDate ? startDate.format('YYYY-MM-DD') : undefined,
                endDate: endDate ? endDate.format('YYYY-MM-DD') : undefined,
                warehouseStatus,
                expectedKuaidi100Code,
                Kuaidi100Code,
                orderStatus
            },
            success: res => {
                console.log('获取发货订单列表', res);
                if (res.code === 200) {
                    let parcelNumber = 0;
                    res.rows.forEach((item, index) => {
                        item.key = index;
                        if (item.parcelNumber) {
                            parcelNumber += 1;
                        }
                    });
                    this.setState({
                        orderList: res.rows,
                        total: res.count,
                        parcelNumber
                    });
                }
            }
        });
    }

    // 显示发货订单的表头
    showColumns() {
        return [{
            title: '订单编号',
            dataIndex: '',
            width: '7%',
            render: record => {
                return <a href='javascript:void(0)' onClick={this.showProduct.bind(this, record.orderId, record.parcelNumber)}>{record.orderId}</a>
            }
        }, {
            title: '客户姓名',
            dataIndex: '',
            width: '7%',
            render(record) {
                return record['user.realname'];
            }
        }, {
            title: '联系方式',
            dataIndex: 'consigneePhone',
            width: '7%',
        }, {
            title: '订单状态',
            dataIndex: '',
            width: '7%',
            render(record) {
                let text;
                switch (record.orderStatus) {
                    case 1:
                        text = '已确认';
                        break;
                    case 2:
                        text = '待发货';
                        break;
                    case 3:
                        text = '已发货';
                        break;
                    case 4:
                        text = '已完成';
                        break;
                }
                return text;
            }
        }, {
            title: '代收金额',
            dataIndex: 'collectionMoney',
            width: '7%',
        }, {
            title: '详细地址',
            dataIndex: '',
            width: '12%',
            render(record) {
                return record.consigneeArea.split(' ').join('') + record.consigneeDetail;
            }
        }, {
            title: '包裹号',
            dataIndex: 'parcelNumber',
            width: '7%',
        }, {
            title: '快递公司',
            dataIndex: 'shipping.name',
            width: '7%',
        }, {
            title: '快递单号',
            dataIndex: 'shipOrderNumber',
            width: '7%',
        }, {
            title: '物流状态',
            dataIndex: '',
            width: '7%',
            render: record => {
                if ([3, 4].includes(record.orderStatus)) {
                    return <a href='javascript:void(0)' onClick={this.showLogisticsInformation.bind(this, record.orderId)}>物流跟踪</a>
                }
            }
        }, {
            title: '发货人',
            dataIndex: 'shippinger.username',
            width: '7%',
        }, {
            title: '发货时间',
            dataIndex: 'shippingDate',
            width: '7%',
        }, {
            title: '详情',
            dataIndex: '',
            width: '7%',
            render: record => {
                const { page, pageSize, dateType, startDate, endDate, warehouseStatus, expectedKuaidi100Code, Kuaidi100Code, orderStatus } = this.state;
                const { consigneeName, shipOrderNumber, consigneePhone, parcelNumber } = this.props.form.getFieldsValue();
                const paths = {
                    pathname: `/crmorderdetail/${record.orderId}`,
                    state: {
                        page,
                        pageSize,
                        consigneeName,
                        shipOrderNumber,
                        consigneePhone,
                        parcelNumber,
                        dateType,
                        startDate: startDate ? startDate.format('YYYY-MM-DD') : undefined,
                        endDate: endDate ? endDate.format('YYYY-MM-DD') : undefined,
                        warehouseStatus,
                        expectedKuaidi100Code,
                        Kuaidi100Code,
                        orderStatus,
                        returnUrl: 2
                    }
                };
                return <Link to={paths}>详情</Link>
            }
        }];
    }

    // 表头的选择框
    showRowSelection() {
        return {
            onSelect: (record, selected, selectedRows) => {
                this.setState({
                    selectOrder: selectedRows
                });
            },
            onSelectAll: (selected, selectedRows) => {
                this.setState({
                    selectOrder: selectedRows
                });
            }
        }
    }

    // 选择发货订单的分页
    changeOrderPage(page) {
        this.setState({
            page
        }, () => {
            this.getDeliveryList();
        });
    }

    // 选择发货订单的每页显示的条数
    changeOrderSize(page, pageSize) {
        this.setState({
            page,
            pageSize
        }, () => {
            this.getDeliveryList();
        });
    }

    // 搜索发货订单列表
    searchDeliveryList() {
        this.setState({
            page: 1
        }, () => {
            this.getDeliveryList();
        });
    }

    // 重置发货订单列表搜索条件
    resetDeliveryList() {
        this.props.form.resetFields();
        this.setState({
            dateType: undefined,
            startDate: null,
            endDate: null,
            warehouseStatus: undefined,
            expectedKuaidi100Code: undefined,
            Kuaidi100Code: undefined,
            orderStatus: undefined,
        }, () => {
            this.getDeliveryList();
        });
    }

    // 选择时间类型
    selectDateType(value) {
        this.setState({
            dateType: value
        });
    }

    // 选择起始时间
    selectStartDate(date) {
        this.setState({
            startDate: date
        });
    }

    // 选择结束时间
    selectEndDate(date) {
        this.setState({
            endDate: date
        });
    }

    // 选择仓库状态
    changeWarehouseStatus(value) {
        this.setState({
            warehouseStatus: value
        });
    }

    // 获取物流公司
    getShipping() {
        $.ajax({
            url: `${config.CrmOrder}/getShipping`,
            type: 'get',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            success: res => {
                console.log('获取物流公司', res);
                this.setState({
                    shipping: res.data
                });
            }
        });
    }

    // 选择预计发货快递公司
    selectExpectedKuaidi100Code(value) {
        this.setState({
            expectedKuaidi100Code: value
        });
    }

    // 选择发货快递公司
    selectKuaidi100Code(value) {
        this.setState({
            Kuaidi100Code: value
        });
    }

    // 选择订单状态
    selectOrderStatus(value) {
        this.setState({
            orderStatus: value
        });
    }

    // 同步时空订单
    syncSKOrder() {
        $.ajax({
            url: `${config.CrmOrder}/syncSKOrder`,
            type: 'post',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            success: res => {
                console.log('同步时空订单', res);
                if (res.code === 200) {
                    this.getDeliveryList();
                }
            }
        });
    }

    // 显示生成快递单号模态框
    showShipOrderNumber() {
        const { selectOrder } = this.state;
        if (!selectOrder.length) {
            return message.error('请先选择订单!');
        }
        this.setState({
            shipOrderNumberVisible: true
        });
    }

    // 隐藏生成快递单号模态框
    hiddenShipOrderNumber() {
        this.setState({
            shipOrderNumberVisible: false
        });
    }

    // 显示订单的商品信息
    showProduct(orderId, parcelNumber) {
        this.setState({
            productVisibile: true
        });
        $.ajax({
            url: `${config.CrmOrder}/getProductList`,
            type: 'get',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            data: {
                orderId
            },
            success: res => {
                console.log('获取订单的商品信息', res);
                if (res.code === 200) {
                    this.setState({
                        orderProduct: { parcelNumber, product: res.data }
                    });
                }
            }
        });
    }

    // 隐藏商品模态框
    hiddenProduct() {
        this.setState({
            productVisibile: false,
            orderProduct: {}
        });
    }

    // 显示导出拣货单模态框
    showExportPickingOrder() {
        const { selectOrder } = this.state;
        if (!selectOrder.length) {
            return message.error('请先选择订单!');
        }
        this.setState({
            pickingOrderVisible: true
        });
    }

    // 隐藏导出拣货单模态框
    hiddenExportPickingOrder() {
        this.setState({
            pickingOrderVisible: false
        });
    }

    // 导出拣货单
    exportPickingOrder() {
        const { userInfo, selectOrder } = this.state;
        if (!selectOrder.length) {
            return message.error('请先选择订单!');
        }
        const orderList = selectOrder.map(item => {
            return item.orderId;
        });
        $.ajax({
            url: `${config.CrmOrder}/exportPickingOrder`,
            type: 'post',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            data: {
                id: userInfo.id,
                orderList,
            },
            success: res => {
                console.log('导出拣货单', res);
                if (res.code === 200) {
                    message.success('导出拣货单成功');
                    location.href = `${config.CrmOrder}${res.data}`;
                    this.setState({
                        pickingOrderVisible: false
                    });
                } else if (res.code === 202) {
                    message.error('无数据!');
                }
            }
        });
    }

    // 显示出库单
    showOutboundOrder() {
        const { selectOrder } = this.state;
        if (!selectOrder.length) {
            return message.error('请先选择订单!');
        }
        this.setState({
            outboundOrderVisible: true
        });
        this.getOutboundOrder();
    }

    // 隐藏出库单
    hiddenOutboundOrder() {
        this.setState({
            outboundOrderVisible: false
        });
    }

    // 显示出库单预览
    showOutboundOrderPreview() {
        this.setState({
            outboundOrderPreviewVisible: true
        });
    }

    // 隐藏出库单预览
    hiddenOutboundOrderPreview() {
        this.setState({
            outboundOrderPreviewVisible: false
        });
    }

    // 获取出库单数据
    getOutboundOrder() {
        const { userInfo, selectOrder } = this.state;
        const orderList = selectOrder.map(item => item.orderId);
        $.ajax({
            url: `${config.CrmOrder}/getOutboundOrder`,
            type: 'post',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            data: {
                id: userInfo.id,
                orderList
            },
            success: res => {
                console.log('出库单预览数据', res);
                if (res.code === 200) {
                    res.data.map((item, index) => {
                        item.productList && item.productList.map((value, key) => {
                            value.key = index;
                        });
                    });
                    this.setState({
                        outboundOrderData: res.data
                    });
                }
            }
        });
    }

    // 出库单预览的表头
    outboundOrderPreviewColumns() {
        return [{
            title: '编号',
            dataIndex: 'productId',
            width: '15%',
        }, {
            title: '产品',
            dataIndex: 'productName',
            width: '55%',
        }, {
            title: '数量',
            dataIndex: 'number',
            width: '15%',
        }, {
            title: '单位',
            dataIndex: 'packing',
            width: '15%',
        }];
    }

    // 打印出库单
    printOutboundOrder() {
        const { outboundOrderData, selectOrder, userInfo } = this.state;
        if (!outboundOrderData.length) {
            return message.error('无数据可打印!');
        }
        const orderList = selectOrder.map(item => item.orderId);
        $.ajax({
            url: `${config.CrmOrder}/printOutboundOrder`,
            type: 'post',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            data: {
                id: userInfo.id,
                orderList
            },
            success: res => {
                console.log('打印出库单', res);
                if (res.code === 200) {
                    this.setState({
                        outboundOrderVisible: false,
                        outboundOrderPreviewVisible: false
                    });
                    message.success('打印出库单成功!', 3);
                }
            }
        });
        window.open(`./index.html#/printOutboundOrder/${orderList}`);
    }

    // 生成快递单号
    setShipOrderNumber() {
        const Kuaidi100Code = this.props.form.getFieldValue('Kuaidi100Code');
        this.props.form.validateFields(['Kuaidi100Code'], (err, values) => {
            if (!err) {
                const { userInfo, selectOrder } = this.state;
                const orderList = selectOrder.map(item => item.orderId);
                $.ajax({
                    url: `${config.CrmOrder}/setShipOrderNumber`,
                    type: 'post',
                    headers: {
                        'Authorization': 'Bearer ' + token,
                    },
                    data: {
                        id: userInfo.id,
                        orderList,
                        Kuaidi100Code: values.Kuaidi100Code
                    },
                    success: res => {
                        console.log('生成快递单号', res);
                        if (res.code === 200) {
                            message.success('生成快递单号成功!');
                            this.setState({
                                shipOrderNumberVisible: false
                            });
                            this.getDeliveryList();
                        } else if (res.code === 202) {
                            message.error('暂不支持的快递公司!');
                        }
                    }
                });
            }
        });
    }

    // 显示重新生成快递单号的模态框
    showResetShipOrderNumber() {
        const { selectOrder } = this.state;
        if (!selectOrder.length) {
            return message.error('请先选择订单!');
        }
        this.setState({
            resetShipOrderNumberVisible: true
        });
    }

    // 隐藏重新生成快递单号的模态框
    hiddenResetShipOrderNumber() {
        this.setState({
            resetShipOrderNumberVisible: false
        });
    }

    // 重新生成快递单号
    resetShipOrderNumber() {
        const { userInfo, selectOrder } = this.state;
        const orderList = selectOrder.map(item => item.orderId);
        $.ajax({
            url: `${config.CrmOrder}/resetShipOrderNumber`,
            type: 'post',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            data: {
                id: userInfo.id,
                orderList
            },
            success: res => {
                console.log('重新生成快递单号', res);
                if (res.code === 200) {
                    message.success('重新生成快递单号成功!');
                    this.setState({
                        resetShipOrderNumberVisible: false
                    });
                    this.getDeliveryList();
                }
            }
        });
    }

    // 显示快递单模态框
    showExpressList() {
        const { selectOrder } = this.state;
        if (!selectOrder.length) {
            return message.error('请选择订单!');
        }
        this.setState({
            expressListVisible: true
        });
    }

    // 隐藏快递单模态框
    hiddenExpressList() {
        this.setState({
            expressListVisible: false
        });
    }

    // 显示快递单预览模态框
    showExpressListPreview() {
        const { selectOrder } = this.state;
        const orderList = selectOrder.map(item => item.orderId);
        window.open(`./expressbill.html#/shunfeng/preview/${orderList.toString()}/1`);
    }

    // 打印快递单&发货
    printExpressList() {
        const { selectOrder, userInfo } = this.state;
        const orderList = selectOrder.map(item => item.orderId);
        $.ajax({
            url: `${config.CrmOrder}/deliver`,
            type: 'post',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            data: {
                id: userInfo.id,
                orderList
            },
            success: res => {
                console.log('打印快递单&发货', res);
                if (res.code === 200) {
                    this.setState({
                        expressListVisible: false
                    });
                    message.success('打印快递单&发货成功!', 3);
                }
            }
        });
        window.open(`./expressbill.html#/shunfeng/print/${orderList.toString()}/1`);
    }

    // 显示物流信息
    showLogisticsInformation(orderId) {
        $.ajax({
            url: `${config.CrmOrder}/getLogisticsInformation`,
            type: 'get',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            data: {
                orderId
            },
            success: res => {
                console.log('物流信息', res);
                if (res.code === 200) {
                    this.setState({
                        logisticsInformation: res.data
                    });
                }
            }
        });
        this.setState({
            logisticsInformationVisible: true
        });
    }

    // 隐藏物流信息
    hiddenLogisticsInformation() {
        this.setState({
            logisticsInformationVisible: false
        });
    }

    render() {
        const { page, pageSize, total, sizeOptions, orderProduct, keyword } = this.state;
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 14 },
            },
        };
        return (
            <Form>
                <div className='goods-label'>
                    <div className='goods-label-cont clearfix'>
                        <div className='goods-label-cont-nav clearfix'>
                            <Breadcrumb separator='>'>
                                <Breadcrumb.Item>会员管理</Breadcrumb.Item>
                                <Breadcrumb.Item>直销发货列表</Breadcrumb.Item>
                            </Breadcrumb>
                        </div>
                        <div className='member-content-Search clearfix'>
                            <div className='addetd addetd-z  addetd-cg'>
                                <FormItem>
                                    {
                                        getFieldDecorator('consigneeName')(
                                            <Input className='addetd-a-r' addonBefore='收货人' placeholder='请输入' />
                                        )
                                    }
                                </FormItem>
                            </div>
                            <div className='addetd addetd-z addetd-cg'>
                                <FormItem>
                                    {
                                        getFieldDecorator('shipOrderNumber')(
                                            <Input className='addetd-a-r' addonBefore='快递单号' placeholder='请输入' />
                                        )
                                    }
                                </FormItem>
                            </div>
                            <div className='addetd addetd-z addetd-cg'>
                                <FormItem>
                                    {
                                        getFieldDecorator('consigneePhone')(
                                            <Input className='addetd-a-r' addonBefore='电话号码' placeholder='请输入' />
                                        )
                                    }
                                </FormItem>
                            </div>
                            <div className='addetd addetd-z addetd-cg'>
                                <FormItem>
                                    {
                                        getFieldDecorator('parcelNumber')(
                                            <Input className='addetd-a-r' addonBefore='包裹号' placeholder='请输入' />
                                        )
                                    }
                                </FormItem>
                            </div>
                        </div>
                        <div className='member-content-Search clearfix'>
                            <div className='addetd addetd-a indtner  shuerwq-1   shuzhazha-1'>
                                <InputGroup compact>
                                    <Input addonBefore='时间类型' />
                                    <Select value={this.state.dateType} onChange={this.selectDateType.bind(this)} allowClear>
                                        <Option value='2'>下单时间</Option>
                                        <Option value='1'>预计发货时间</Option>
                                        <Option value='4'>发货时间</Option>
                                        <Option value='5'>签收时间</Option>
                                    </Select>
                                </InputGroup>
                            </div>
                            <div className='addetd addetd-a addr-yo yoda-ty  kehe-ty' style={{ marginLeft: 20, marginRight: 0, }}>
                                <InputGroup compact>
                                    <div className='chengge-d'>
                                        <DatePicker
                                            onChange={this.selectStartDate.bind(this)}
                                            value={this.state.startDate}
                                        />
                                    </div>
                                </InputGroup>
                            </div>
                            <div className='addetd addetd-a addr-yo yoda-ty kehe-ty' style={{ marginRight: 0, }}>
                                <InputGroup compact>
                                    <div className='chengge-d'>
                                        <DatePicker
                                            onChange={this.selectEndDate.bind(this)}
                                            value={this.state.endDate}
                                        />
                                    </div>
                                </InputGroup>
                            </div>
                            <div className='addetd addetd-a indtner shuzhazha-2' >
                                <InputGroup compact>
                                    <Input addonBefore='仓库作业状态' />
                                    <Select value={this.state.warehouseStatus} onChange={this.changeWarehouseStatus.bind(this)}>
                                        <Option value='1'>已导出拣货单</Option>
                                        <Option value='2'>时空已出库</Option>
                                        <Option value='3'>已打印出库单</Option>
                                        <Option value='4'>已生成快递单号</Option>
                                        <Option value='5'>已打印快递单</Option>
                                    </Select>
                                </InputGroup>
                            </div>
                        </div>
                        <div className='member-content-Search clearfix'>
                            <div className='addetd addetd-a indtner ouegt-a'>
                                <InputGroup compact>
                                    <Input addonBefore='预计发货快递公司' />
                                    <Select value={this.state.expectedKuaidi100Code} onChange={this.selectExpectedKuaidi100Code.bind(this)}>
                                        {
                                            this.state.shipping.map((item, index) => {
                                                return <Option key={index} value={item.Kuaidi100Code}>{item.name}</Option>
                                            })
                                        }
                                    </Select>
                                </InputGroup>
                            </div>
                            <div className='addetd addetd-a indtner ouegt-b'>
                                <InputGroup compact>
                                    <Input addonBefore='实际快递公司' />
                                    <Select value={this.state.Kuaidi100Code} onChange={this.selectKuaidi100Code.bind(this)}>
                                        {
                                            this.state.shipping.map((item, index) => {
                                                return <Option key={index} value={item.Kuaidi100Code}>{item.name}</Option>
                                            })
                                        }
                                    </Select>
                                </InputGroup>
                            </div>
                            <div className='addetd addetd-a indtner ouegt-c'>
                                <InputGroup compact>
                                    <Input addonBefore='订单状态' />
                                    <Select value={this.state.orderStatus} onChange={this.selectOrderStatus.bind(this)}>
                                        <Option value='1'>已确认</Option>
                                        <Option value='2'>待发货</Option>
                                        <Option value='3'>已发货</Option>
                                        <Option value='4'>已完成</Option>
                                    </Select>
                                </InputGroup>
                            </div>
                            <Button type='primary' style={{ marginLeft: 50 }} className='member-button' icon='search' onClick={this.searchDeliveryList.bind(this)}>搜索</Button>
                            <Button type='primary' className='member-button' icon='reload' onClick={this.resetDeliveryList.bind(this)}>重置</Button>
                        </div>
                        <div className='chengge-e  your_sa' style={{ marginBottom: 20 }}>
                            {/* <Button className='member-button-aa' type='primary' style={{ marginLeft: 20 }} onClick={() => this.generateBarCode()}>生成快递号</Button>
                                <Button className='member-button-aa' type='primary' onClick={() => this.printExpressBill()}>打印快递单</Button> */}

                            {keyword.includes('exportPickingOrder') && <Button className='member-button-aa' onClick={this.showExportPickingOrder.bind(this)} style={{ width: 100, marginLeft: 20, }} type='primary'>导出拣货单</Button>}
                            {keyword.includes('syncSKOrder') && <Button className='member-button-aa' type='primary' style={{ width: 140 }} onClick={this.syncSKOrder.bind(this)}>同步时空出库信息</Button>}
                            <Modal
                                title={false}
                                footer={false}
                                visible={this.state.pickingOrderVisible}
                                onCancel={this.hiddenExportPickingOrder.bind(this)}
                                maskClosable={false}
                            >
                                <div className='delets_gg'>
                                    <p className='delets_gg1'>温馨提示</p>
                                    <p>是否现在导出该{this.state.selectOrder.length}条订单的捡货单？</p>
                                    <p style={{ marginTop: 30 }}>
                                        <Button className='member-button-aa' onClick={this.exportPickingOrder.bind(this)} style={{ width: 80 }} type='primary'>确定</Button>
                                    </p>
                                </div>
                            </Modal>
                            {keyword.includes('printOutboundOrder') && <Button className='member-button-aa' onClick={this.showOutboundOrder.bind(this)} style={{ width: 100 }} type='primary' >打印出库单</Button>}
                            <Modal
                                title={false}
                                footer={false}
                                visible={this.state.outboundOrderVisible}
                                onCancel={this.hiddenOutboundOrder.bind(this)}
                                maskClosable={false}
                            >
                                <div className='delets_gg'>
                                    <p className='delets_gg1'>温馨提示</p>
                                    <p>是否现在打印该{this.state.outboundOrderData.length}条订单的出库单？</p>
                                    <p style={{ marginTop: 30 }}>
                                        <Button className='member-button-aa' onClick={this.showOutboundOrderPreview.bind(this)} style={{ width: 80 }} type='primary'>预览</Button>
                                        <Button className='member-button-aa' onClick={this.printOutboundOrder.bind(this)} style={{ width: 80, marginLeft: 20 }} type='primary'>确定打印</Button>
                                    </p>
                                </div>
                            </Modal>
                            <Modal title='出库单预览'
                                width={800}
                                footer={false}
                                visible={this.state.outboundOrderPreviewVisible}
                                maskClosable={false}
                                closable={false}
                                id='section-to-print-outboundOrder'
                            >
                                <p style={{ marginTop: 30, textAlign: ' center' }}>
                                    <Button onClick={this.hiddenOutboundOrderPreview.bind(this)} style={{ width: 80, height: 30 }}>返回</Button>
                                    <Button className='member-button-aa' onClick={this.printOutboundOrder.bind(this)} style={{ width: 80, height: 30, marginLeft: 20 }} type='primary'>打印</Button>
                                </p>
                                {
                                    this.state.outboundOrderData.map((item, index) => {
                                        return <div key={index} className='delets_piangt'>
                                            <div className='delets_piangt-a'>
                                                <Row>
                                                    <Col span={24}><p className='delets_piangt-1'>{item.day}</p></Col>
                                                </Row>
                                                <Row>
                                                    <Col span={24}><p className='delets_piangt-2'>出库证明</p></Col>
                                                </Row>
                                                <Row style={{ marginBottom: 5 }}>
                                                    <Col span={12}><p className='delets_piangt-3'><span>售后微信：</span>laozy995</p></Col>
                                                    <Col span={12}><p className='delets_piangt-3'><span>售后电话：</span>073183992867</p></Col>
                                                </Row>
                                                <Row style={{ marginBottom: 5 }}>
                                                    <Col span={12}><p className='delets_piangt-3'><span>顾客姓名：</span>{item.userName}</p></Col>
                                                    <Col span={12}><p className='delets_piangt-3'><span>包裹编号：</span>No.{item.parcelNumber}</p></Col>
                                                </Row>
                                                <Row style={{ marginBottom: 5 }}>
                                                    <Col span={12}><p className='delets_piangt-3'><span>联系电话：</span>{item.consigneePhone}</p></Col>
                                                    <Col span={12}><p className='delets_piangt-3'><span>日期：</span>{item.date}</p></Col>
                                                </Row>
                                                <Row style={{ marginTop: 15 }}>
                                                    <Table
                                                        columns={this.outboundOrderPreviewColumns()}
                                                        dataSource={item.productList}
                                                        pagination={false}
                                                        bordered
                                                    />
                                                </Row>
                                                <Row style={{ marginTop: 10 }}>
                                                    <p className='delets_piangt-4'>套餐总价：  {item.orderMoney} 元</p>
                                                </Row>
                                            </div>
                                        </div>
                                    })
                                }
                            </Modal>
                            {keyword.includes('setShipOrderNumber') && <Button className='member-button-aa' onClick={this.showShipOrderNumber.bind(this)} style={{ width: 100 }} type='primary'>生成快递号</Button>}
                            <Modal
                                title='选择快递公司'
                                footer={false}
                                visible={this.state.shipOrderNumberVisible}
                                onCancel={this.hiddenShipOrderNumber.bind(this)}
                                maskClosable={false}
                            >
                                <div className='delets_gg'>
                                    <FormItem
                                        {...formItemLayout}
                                        label='快递公司'
                                        hasFeedback
                                        className='logns-ad'
                                    >
                                        {
                                            getFieldDecorator('Kuaidi100Code', {
                                                rules: [{ required: true, message: '请选择快递公司!' }]
                                            })(
                                                <Select>
                                                    {
                                                        this.state.shipping.map((item, index) => {
                                                            return <Option key={index} value={item.Kuaidi100Code}>{item.name}</Option>
                                                        })
                                                    }
                                                </Select>
                                                )
                                        }
                                    </FormItem>
                                    <FormItem
                                        {...formItemLayout}
                                        label='业务类型'
                                        hasFeedback
                                        className='logns-ad'
                                    >
                                        <Select>
                                            <Option value='Y'>顺风特惠</Option>
                                            <Option value='N'>顺风专送</Option>
                                        </Select>
                                    </FormItem>
                                    <FormItem
                                        {...formItemLayout}
                                        label='付款方式'
                                        hasFeedback
                                        className='logns-ad'
                                    >
                                        <Select>
                                            <Option value='Y'>寄付转第三方付月结</Option>
                                            <Option value='N'>寄付月结</Option>
                                        </Select>
                                    </FormItem>
                                    <FormItem
                                        {...formItemLayout}
                                        label='月结卡号'
                                        hasFeedback
                                        className='logns-ad'
                                    >
                                        <Select>
                                            <Option value='Y'>1</Option>
                                            <Option value='N'>2</Option>
                                        </Select>
                                    </FormItem>
                                    <FormItem
                                        {...formItemLayout}
                                        label='代收货款卡号'
                                        hasFeedback
                                        className='logns-ad'
                                    >
                                        <Select>
                                            <Option value='Y'>1</Option>
                                            <Option value='N'>2</Option>
                                        </Select>
                                    </FormItem>
                                    <FormItem
                                        {...formItemLayout}
                                        label='是否加急'
                                        hasFeedback
                                        className='logns-ad'
                                    >
                                        <Select>
                                            <Option value='Y'>否</Option>
                                            <Option value='N'>是</Option>
                                        </Select>
                                    </FormItem>
                                    <p style={{ marginTop: 30 }}>
                                        <Button className='member-button-aa' onClick={this.setShipOrderNumber.bind(this)} style={{ width: 80 }} type='primary'>生成快递号</Button>
                                    </p>
                                </div>
                            </Modal>
                            {keyword.includes('resetShipOrderNumber') && <Button className='member-button-aa' style={{ width: 140 }} onClick={this.showResetShipOrderNumber.bind(this)} type='primary'>重新生成快递单号</Button>}
                            <Modal
                                title={false}
                                footer={false}
                                visible={this.state.resetShipOrderNumberVisible}
                                maskClosable={false}
                                closable={false}
                            >
                                <div className='delets_gg'>
                                    <p className='delets_gg1'>温馨提示</p>
                                    <p>是否确认取消该{this.state.selectOrder.length}条订单的快递单号？</p>
                                    <p style={{ marginTop: 30 }}>
                                        <Button className='member-button-aa' onClick={this.resetShipOrderNumber.bind(this)} style={{ width: 80 }} type='primary'>确定</Button>
                                        <Button className='member-button-aa' onClick={this.hiddenResetShipOrderNumber.bind(this)} style={{ width: 80, marginLeft: 20 }} type='primary'>取消</Button>
                                    </p>
                                </div>
                            </Modal>
                            {keyword.includes('deliver') && <Button className='member-button-aa' onClick={this.showExpressList.bind(this)} style={{ width: 140 }} type='primary'>打印快递单&发货</Button>}
                            <Modal
                                title={false}
                                footer={false}
                                visible={this.state.expressListVisible}
                                onCancel={this.hiddenExpressList.bind(this)}
                                maskClosable={false}
                            >
                                <div className='delets_gg'>
                                    <p className='delets_gg1'>温馨提示</p>
                                    <p>是否现在打印该{this.state.selectOrder.length}条快递面单？</p>
                                    <p style={{ marginTop: 30 }}>
                                        <Button className='member-button-aa' onClick={this.showExpressListPreview.bind(this)} style={{ width: 80 }} type='primary'>预览</Button>
                                        <Button className='member-button-aa' onClick={this.printExpressList.bind(this)} style={{ width: 80, marginLeft: 20 }} type='primary'>确定打印</Button>
                                    </p>
                                </div>
                            </Modal>
                            <div style={{ float: 'right', paddingRight: 20 }}>符合条件的包裹数量：  {this.state.parcelNumber}</div>
                        </div>
                        <div className='allgoods-table clearfix'>
                            <Table
                                columns={this.showColumns()}
                                dataSource={this.state.orderList}
                                pagination={false}
                                bordered
                                rowSelection={this.showRowSelection()}
                            />
                        </div>
                        <div className='goods-label-let'>
                            <div className='floor-ppagi'>
                                {
                                    total == 0
                                        ?
                                        <p className='floor-ppagip'>共{total}条记录</p>
                                        :
                                        <p className='floor-ppagip'>当前显示{1 + (page - 1) * pageSize}—{page * pageSize > total ? total : page * pageSize}条记录，共{total}条记录</p>
                                }
                                <Pagination
                                    current={page}
                                    total={total || 1}
                                    defaultPageSize={pageSize}
                                    onChange={this.changeOrderPage.bind(this)}
                                    showSizeChanger
                                    pageSizeOptions={sizeOptions}
                                    onShowSizeChange={this.changeOrderSize.bind(this)}
                                />
                            </div>
                        </div>
                    </div>
                </div>
                <Modal
                    visible={this.state.productVisibile}
                    maskClosable={false}
                    footer={null}
                    width={590}
                    onCancel={this.hiddenProduct.bind(this)}
                >
                    <p className='shuishy'>商品信息</p>
                    <div className='shuishy-a'>包裹号：{orderProduct.parcelNumber}</div>
                    <Row className='shuishy-b'>
                        <Col span={14}>产品名称</Col>
                        <Col span={5}>数量</Col>
                        <Col span={5}>操作</Col>
                    </Row>
                    {orderProduct.product && orderProduct.product.map((item, index) => {
                        return <Row className='crmorderlist-product-row clearfix shuishy-c' key={index}>
                            <Col span={14} className='shuishy-d'>{item['product.productname']}</Col>
                            <Col span={5} className='shuishy-d'>{item.number}</Col>
                            <Col span={5} className='shuishy-d'></Col>
                        </Row>
                    })}
                </Modal>
                <Modal
                    title='物流信息'
                    visible={this.state.logisticsInformationVisible}
                    maskClosable={false}
                    footer={null}
                    onCancel={this.hiddenLogisticsInformation.bind(this)}
                >
                    <div style={{ height: '600px', overflowY: 'auto' }}>
                        <Timeline className="oddt-wltl">
                            {
                                this.state.logisticsInformation.map((item, index) => {
                                    return <Timeline.Item key={index}>
                                        <p>{moment(item.ftime).format('YYYY-MM-DD HH:mm:ss')}</p>
                                        <p>{item.context}</p>
                                    </Timeline.Item>
                                })
                            }
                        </Timeline>
                    </div>
                </Modal>
            </Form >
        )
    }
}

export default Form.create()(CrmSendList);